import { IFeidaoAiBrowserComponent } from '@feidao/web/interfaces';
import set from '@feidao/web/atom/browser/local/set';
import get from '@feidao/web/atom/browser/local/get';
import { anim, combine, play } from '@feidao/animation';
import fire from '@feidao/web/atom/browser/msg/fire';
////////////////////////////////////////////////////////////////////////////////
// import atoms
////////////////////////////////////////////////////////////////////////////////

export default function a001(fd: IFeidaoAiBrowserComponent, ...args: any[]) {
	// 点击
	// console.log('点击');
	const target = args[0].currentTarget as HTMLDivElement;
	const flag = target.getAttribute('flag');
	// const info = JSON.parse(decodeURIComponent(target.getAttribute('data')));
	const level = target.getAttribute('data-feidao-l');
	let anim_arr: any[] = [];
	// 现为折叠状态
	if (flag === '0') {
		const selec_node = get<HTMLDivElement>(fd, 's_node');
		// 当前单击的菜单为1级菜单，则其他已选择的菜单全部关闭
		if (level === '1') {
			if (selec_node) {
				const s_flag = selec_node.getAttribute('flag');
				// 现为展开
				if (s_flag === '1') {
					// 找到已展开菜单的一级菜单， 将下属所有展开菜单 flag = 1 关闭
					const s_level = selec_node.getAttribute('data-feidao-l');
					let p: Element = null;
					if (s_level === '1') {
						p = selec_node.parentElement;
					} else {
						p = selec_node.closest('[data-feidao-level="1"]');
					}
					update_icon(p as any, false);

					const f_div = p.querySelector<HTMLDivElement>('[flag="1"]');
					f_div && f_div.setAttribute('flag', '0');
					const s_p: any = p.querySelectorAll('[name="div2"]');
					if (s_p && s_p.length > 0) {
						const anis = close_node(s_p);
						anim_arr = anim_arr.concat(anis);
					}
				}
			}
			const ss = fd.data.node.querySelectorAll('[data-feidao-s="s"]');
			Array.from(ss).forEach((s: HTMLDivElement) => {
				s.style.setProperty('position', 'absolute');
			});
			const t = target.querySelector<HTMLDivElement>('[data-feidao-s="s"]');
			if (t) {
				t.style.removeProperty('position');
			}
			update_icon(target, true);
		} else {
			// 同一个1级菜单下，只能是平级或者下级
			const p = target.closest('[data-feidao-level="' + Number(level) + '"]') as HTMLDivElement;
			const s_p = p.querySelector<HTMLDivElement>('[flag="1"]');
			if (s_p) {
				s_p.setAttribute('flag', '0');
				const c_s_p: any = p.querySelectorAll('[name="div' + (Number(level) + 1) + '"]');
				const as = close_node(c_s_p);
				anim_arr = anim_arr.concat(as);
			}
		}

		// 互斥
		set(fd, 's_node', target);
		target.setAttribute('flag', '1');
		// set(fd, 's_info', info);
		const p = target.parentElement;
		const c_nodes = p.querySelectorAll('[name="div' + (Number(level) + 1) + '"]');
		if (c_nodes && c_nodes.length > 0) {
			const anims = Array.from(c_nodes).map((n: HTMLDivElement) => {
				set_property(n);
				return anim(n, {}, { height: { start: 0, end: 44 } }, {
					end: () => {
						del_property(n);
						// 调用事件
						fire('zjc-000001', 'ec-001');
					}
				});
			});
			anim_arr = anim_arr.concat(anims);
		}
	} else {
		// 现为展开状态
		target.setAttribute('flag', '0');
		const pn = target.parentElement;
		const c_nodes: any = pn.querySelectorAll('[name="div' + (Number(level) + 1) + '"]');
		if (c_nodes && c_nodes.length > 0) {
			const aniss = close_node(c_nodes);
			anim_arr = anim_arr.concat(aniss);
		}
		update_icon(target, false);
	}
	if (anim_arr.length > 0) {
		play(combine(anim_arr));
	}
}

function close_child(node: HTMLDivElement) {
	const c_nodes = node.querySelectorAll('[name="xz"]');
	Array.from(c_nodes).forEach((n: HTMLDivElement) => {
		n.parentElement.style.setProperty('display', 'none');
		n.setAttribute('flag', '0');
	});
}

function del_property(node: HTMLDivElement) {
	node.style.removeProperty('overflow');
	node.style.removeProperty('padding-top');
	node.style.removeProperty('margin-top');
	node.style.removeProperty('height');
}

function set_property(node: HTMLDivElement) {
	node.style.setProperty('overflow', 'hidden');
	node.style.setProperty('padding-top', '0');
	node.style.setProperty('margin-top', '0');
}

function close_node(c_nodes: HTMLDivElement[]) {
	const aniss = Array.from(c_nodes).map((n: HTMLDivElement) => {
		n.setAttribute('flag', '0');
		set_property(n);
		return anim(n, {}, { height: { start: n.clientHeight, end: 0 } }, {
			end: () => {
				del_property(n);
				n.style.setProperty('display', 'none');
				// 修改子级
				close_child(n);
			}
		});
	});
	return aniss;
}

function update_icon(node: HTMLDivElement, up: false | true) {
	const i = node.querySelector<HTMLImageElement>('[data-feidao-id="icon"]');
	if (i) {
		i.src = up ? '../images/jt_top.png' : '../images/jt_button.png';
	}
}
